<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item>医师管理</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="card-wrap">
    <!-- vue的遍历，目的是创造data.length个数的card -->
    <div class="card-context"
         v-for="item in 10"
         :key="item"
         @click="doctordetail(item)"
    >
      <el-card style="max-width: 280px">
        <template #header>XX医师</template>
        <img class="image-size"
             src="https://img1.baidu.com/it/u=1448634477,43834514&fm=253&fmt=auto&app=138&f=JPEG?w=518&h=500"
        />
      </el-card>
    </div>
  </div>

</template>

<script setup>

import {useRouter} from "vue-router";

const router = useRouter()

const doctordetail=(e)=>{
  console.log(e)
  router.push("/doctor/details")
}
</script>

<style scoped>
.card-wrap {

  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

.card-context {
  margin: 25px;
}

.survey-card-context {

  flex: 1;
  width: 300px;
  min-width: 300px;
  height: 210px;
  margin: 10px;
}

.image-size {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

</style>